<!DOCTYPE html>
<html lang="en">
<head>
<title>Navbar Template for Bootstrap</title>
          <?php include 'includes/header.php'; ?>
   </head>

<body>
	<div class="container">
    
		<?php include 'includes/navbar.php';?>
		<div id="addTaskDialog" title="Add new task" style="display: none; width: 500">
			<p>Add new task</p>
			<fieldset>
			<label for="category">Category</label>
			<input type="text" name="category" id="category" class="text ui-widget-content ui-corner-all">
			
			<label for="action">Action</label>
			<input type="text" name="action" id="action" class="text ui-widget-content ui-corner-all">

			<label for="duration">Duration</label>
			<input type="text" name="duration" id="duration" class="text ui-widget-content ui-corner-all">

			<label for="comment">Comment</label>
			<textarea name="comment" id="comment" class="text ui-widget-content ui-corner-all" ></textarea>
			</fieldset>
		</div>
      <!-- Main component -->
		<div class="jumbotron">
		<div id="calendarLoading">calendarLoading</div>
			<div id="calendar"></div>			
		</div>

	</div>
	<!-- /container -->
    <?php include 'includes/footer.php';?>	
	<!-- scripts -->
	<script>

	$(document).ready(function() {
	
		$('#calendar').fullCalendar({
			editable: false,
			theme: true,
			events: {
				url : "Controller.php",
					data: {
						functionName: 'getTasksForCalendar',
				},
		        type: 'POST'
			},
			header: {
				left: 'prev,next today',
				center: 'title',
				right: 'month,agendaWeek,agendaDay'
			},
			
			loading: function(bool) {
				if (bool) $('#calendarLoading').show();
				else $('#calendarLoading').hide();
			},
		    dayClick: function(date, allDay, jsEvent, view) {

		        if (allDay) {
		            console.log('Clicked on the entire day: ' + date);
		        }else{
		        	console.log('Clicked on the slot: ' + date);
		        }
		        
		        $(function() {
		        	$( '#addTaskDialog').dialog({
		        		 height: 412,
		        		 width: 454,
		        		 buttons: {
		        			 "ok": function() {
			        			 console.log('ok hundler');
			        			 console.log(date);
			        				var values={
			        						"functionName" : 'addTask',                        
			        						"category"     : $("#category").val(),
			        						"action"       : $("#action").val(),
			        		     			"date"         : date.getFullYear()+'-'+(date.getMonth()+1)+'-'+date.getDate(),
			        						"duration"     : $("#duration").val(),
			        						"comment"      : $("#comment").val()
			        				};
			        				$.ajax({
			        					url : "Controller.php",
			        					data : values,
			        					type : 'POST',
			        					success : function(response){
			        						console.log(response);
			        					},
			        					error : function(errorObject){ 
			        						console.log(errorObject);
			        					}
			        				});
		        			 }
		        		 }
		        	});
		        	});
		        // change the day's background color just for fun
		        //$(this).css('background-color', 'red');

		    }
		});
		
	});
    </script>
</body>
</html>
